<!DOCTYPE html> 
<html> 
<head> 
	<title>PLAYER!</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script src="./js/init.js"></script>
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head> 
<body> 
 
<div data-role="page">
 
  <div data-role="header" data-position="fixed">
    <h1>Start a new game</h1>
  </div>
 
  <div data-role="content"> 
  <!-- FIXME 
  		* add label/value for opponent (get from sessionstorage on pagebeforeshow)
  		* add find button linking to findplayer.html (contains the form below, writes result into sessionstorage)
  		* ...
  -->
	<div data-role="fieldcontain">
	    <label for="playername">Player's name</label>
	    <input type="search" name="playername" id="playername" value="" />
	    <input type="submit" id="findplayer_submit" value="Find">
	</div>
  </div>
  
  <div data-role="footer" data-id="playerfooter" data-position="fixed"> 
    <div data-role="navbar">
    	<ul>
    		<li><a href="#home" data-icon="home">Home</a></li>
    		<li><a href="gameactions.html" data-icon="gear" class="ui-btn-active ui-state-persist">Games</a></li>
    		<li><a href="rankings.html" data-icon="gear">Ranks</a></li>
    	</ul>
    </div>    
  </div>
  
  <script>
 $("#findplayer_submit").click(function() {
	$.ajax({
		type: "POST", 
	    url: "../rest/search/players/playername/",
	    data: "playername":$("#playername").val(),
	    beforeSend: function(){
			$.mobile.showPageLoadingMsg(); //FIXME should be modal!
	    },
	    success: function(data, textStatus, XMLHttpRequest){
	    	var playersList = $("#players");
			playersList.empty();
    		if (data.players.length < 1) {
    			playersList.html('No players found');
    		} else {
    			$.each(data.players function(i, player){
					playersList.append(playerToHtml(player));
		      	});
				playersList.listview('refresh');
			}
	    	
	    	$.mobile.hidePageLoadingMsg();
		},
		error: function (XMLHttpRequest, textStatus, errorThrown) {
			$.mobile.hidePageLoadingMsg();
    	}
	});
  });
  
  function playerToHtml(player) {
  	return '<li><a href="javascript:choosePlayer(' + player.id + ');">' + player.playername + ' rank? trend? lastplayed? ... </a></li>';
  }

  function choosePlayer(playerId) {
	sessionStorage.opponentId = playerId;
	//FIXME simulate back OR use changePage("creategame.html", {....})
  }
  
</script>
 
 
</div>
 
</body>
</html>